<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="65%" v-dialogDrag append-to-body>
      <el-form  ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px" l>
		  <el-row>
		    <el-col :span="12"><div class="grid-content bg-purple">
				<el-form-item label="景点名称" prop="name">
				  <el-input v-model="formData.name" placeholder="请输入景点名称" />
				</el-form-item>
				<el-form-item label="供应商" prop="supplier">
				  <el-input v-model="formData.supplier" placeholder="请输入供应商" />
				</el-form-item>
				<el-form-item label="星级" prop="rating">
				  <el-select v-model="formData.rating" placeholder="请选择" style="width: 150px;">
					    <el-option label="无" value="无" />
				        <el-option label="A" value="A" />
						<el-option label="AA" value="AA" />
						<el-option label="AAA" value="AAA" />
						<el-option label="AAAA" value="AAAA" />
						<el-option label="AAAAA" value="AAAAA" />
						<el-option label="AAAAAA" value="AAAAAA" />
						<el-option label="AAAAAAA" value="AAAAAAA" />
				  </el-select>
				  <el-select v-model="formData.type" placeholder="请选择" style="width: 150px;">
				        <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_scenicspot)" :key="dict.value"
				          :label="dict.label" :value="dict.value" />
				  </el-select>
				</el-form-item>
				<!-- <el-form-item label="景点" prop="type">
				  
				</el-form-item> -->
				<el-form-item label="所在城市" prop="city">
				  <el-input v-model="formData.city" placeholder="请输入所在城市" />
				</el-form-item>
				<el-form-item label="联系人" prop="namephone">
				  <el-input v-model="formData.namephone" placeholder="请输入联系人" />
				</el-form-item>
				<el-form-item label="电话" prop="phone">
				  <el-input v-model="formData.phone" placeholder="请输入电话" />
				</el-form-item>
				<el-form-item label="传真" prop="fax">
				  <el-input v-model="formData.fax" placeholder="请输入传真" />
				</el-form-item>
			</div></el-col>
		    <el-col :span="12"><div class="grid-content bg-purple-light">
				<el-form-item label="游览时间" prop="visitdate">
					 <el-input v-model="formData.visitdate" placeholder="请输入游览时间" />
				</el-form-item>
				<el-form-item label="是否虚拟" prop="isactual">
				   <el-radio-group v-model="formData.isactual">
				      <el-radio label="实景点">实景点</el-radio>
				      <el-radio label="虚拟景点">虚拟景点</el-radio>
				    </el-radio-group>
				</el-form-item>
				<el-form-item label="是否购物店" prop="isshopping">
					<el-checkbox v-model="formData.isshopping"></el-checkbox>
				</el-form-item>
				<el-form-item label="是否可用" prop="isenable">
					<el-radio-group v-model="formData.isenable">
					   <el-radio label="可用">可用</el-radio>
					   <el-radio label="不可用">不可用</el-radio>
					 </el-radio-group>
				</el-form-item>
				<el-form-item label="是否常用" prop="ischangyong">
				    <el-radio-group v-model="formData.ischangyong">
				       <el-radio label="否">否</el-radio>
				       <el-radio label="是">是</el-radio>
				     </el-radio-group>	
				</el-form-item>
				<el-form-item label="船类型" prop="shiptype">
				   <el-input v-model="formData.shiptype" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="名单标识" prop="namesign">
					<el-select v-model="formData.namesign" placeholder="请选择">
					      <el-option v-for="dict in this.getDictDatas(DICT_TYPE.team_scenicspot_namesign)" :key="dict.value"
					        :label="dict.label" :value="dict.value" />
					</el-select>
					
				 
				</el-form-item>
			</div></el-col>
		  </el-row>
            <el-form-item label="门票价格" prop="feename">
				<table class="table-bordered paymentTable1">
					<tbody>
						<tr>
							<th rowspan="2" style="width:200px;">票名</th>
							 <th colspan="3">成人</th>
							<th colspan="3">儿童</th>
							<th >全陪</th>
							<th rowspan="2">加点人头费	</th>
							<th rowspan="2">备注</th>
							<!-- <th colspan="3">儿童</th>
							<th >全陪</th>
							<th rowspan="2"   style="width: 170px;">加点人头费</th>
							<th rowspan="2" style="width: 170px;">备注</th> -->
						</tr>
						<tr>
							
							<th >门市价</th>
							<th>加点价</th>
							<th >底价</th>
							<th >门市价</th>
							<th>加点价</th>
							<th>底价</th>
							<th>底价</th>
							<!-- <th >全陪</th>
							<th >加点人头费	</th>
							<th >备注</th> -->
						</tr>
						<tr>
							<td><el-input v-model="formData.feename" placeholder="票名" /></td>
							<td><el-input v-model="formData.retailPricec" placeholder="门市价成" /></td>
							<td><el-input v-model="formData.somePricec" placeholder="加点价成人" /></td>
							<td><el-input v-model="formData.basePricec" placeholder="底价成人" /></td>
							<td><el-input v-model="formData.retailPricee" placeholder="门市价儿童" /></td>
							<td><el-input v-model="formData.somePricee" placeholder="加点价儿童" /></td>
							<td><el-input v-model="formData.basePricee" placeholder="底价儿童" /></td>
							<td><el-input v-model="formData.basePriceq" placeholder="底价" /></td>
							<td><el-input v-model="formData.column1" placeholder="人头费" /></td>
							<td><el-input v-model="formData.column2" placeholder="备注" /></td>
							
						</tr>
					</tbody>
				</table>	
            </el-form-item>
			<el-form-item label="简介" prop="introduce">
			  <el-input type="textarea" :rows="2" v-model="formData.introduce" placeholder="请输入简介" />
			</el-form-item>
			<el-form-item label="景点修饰词" prop="introduce2">
			  <el-input  type="textarea" :rows="2" v-model="formData.introduce2" placeholder="请输入景点修饰词" />
			</el-form-item>        		
                   
      </el-form>
              <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as ScenicspotApi from '@/api/team/scenicspot';
      export default {
    name: "ScenicspotForm",
    components: {
                    },
    data() {
      return {
        // 弹出层标题
        dialogTitle: "",
        // 是否显示弹出层
        dialogVisible: false,
        // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
        formLoading: false,
        // 表单参数
        formData: {
                            id: undefined,
                            name: undefined,
                            introduce: undefined,
                            visitdate: undefined,
                            isactual: "实景点",
                            supplier: undefined,
                            isshopping: 0,
                            rating: "无",
                            type: "景点",
                            isenable: "可用",
                            ischangyong: "否",
                            city: undefined,
                            namephone: undefined,
                            phone: undefined,
                            fax: undefined,
                            shiptype: undefined,
                            namesign: undefined,
                            introduce2: undefined,
                            column1: undefined,
                            column2: undefined,
                            column3: undefined,
                            column4: undefined,
                            column5: undefined,
                            feename: undefined,
                            retailPricec: undefined,
                            somePricec: undefined,
                            basePricec: undefined,
                            retailPricee: undefined,
                            somePricee: undefined,
                            basePricee: undefined,
                            basePriceq: undefined,
        },
        // 表单校验
        formRules: {
                        name: [{ required: true, message: '景点名称不能为空', trigger: 'blur' }],
        },
                        };
    },
    methods: {
      /** 打开弹窗 */
     async open(id) {
        this.dialogVisible = true;
        this.reset();
        // 修改时，设置数据
        if (id) {
          this.formLoading = true;
          try {
            const res = await ScenicspotApi.getScenicspot(id);
            this.formData = res.data;
            this.title = "修改景点资料";
          } finally {
            this.formLoading = false;
          }
        }
        this.title = "新增景点资料";
              },
      /** 提交按钮 */
      async submitForm() {
        // 校验主表
        await this.$refs["formRef"].validate();
                  this.formLoading = true;
        try {
          const data = this.formData;
                  // 修改的提交
          if (data.id) {
            await ScenicspotApi.updateScenicspot(data);
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.$emit('success');
            return;
          }
          // 添加的提交
          await ScenicspotApi.createScenicspot(data);
          this.$modal.msgSuccess("新增成功");
          this.dialogVisible = false;
          this.$emit('success');
        } finally {
          this.formLoading = false;
        }
      },
                      /** 表单重置 */
      reset() {
        this.formData = {
                            id: undefined,
                            name: undefined,
                            introduce: undefined,
                            visitdate: undefined,
                             isactual: "实景点",
                            supplier: undefined,
                            isshopping: 0,
                            rating: "无",
                            type: "景点",
							isenable: "可用",
							ischangyong: "否",
                            city: undefined,
                            namephone: undefined,
                            phone: undefined,
                            fax: undefined,
                            shiptype: undefined,
                            namesign: undefined,
                            introduce2: undefined,
                            column1: undefined,
                            column2: undefined,
                            column3: undefined,
                            column4: undefined,
                            column5: undefined,
                            feename: undefined,
                            retailPricec: undefined,
                            somePricec: undefined,
                            basePricec: undefined,
                            retailPricee: undefined,
                            somePricee: undefined,
                            basePricee: undefined,
                            basePriceq: undefined,
        };
        this.resetForm("formRef");
      }
    }
  };
</script><style scoped>
	.borders{
		border: solid 1px #dadada;
		    padding-top: 10px;
		.el-form-item { 
			margin-bottom:12px !important;
		}
		
	}
	.paymentTable1 {
		th{
			width: 212px;
			height: 30px !important;
		}
		
	}
	table {
	    border-spacing: 0;
	    border-collapse: collapse;
	}
	.table-bordered {
	    border: 1px solid #95bce2;
	}
	.table-bordered>tbody>tr>td, 
	.table-bordered>tbody>tr>th,
	.table-bordered>tfoot>tr>td,
	.table-bordered>tfoot>tr>th,
	.table-bordered>thead>tr>td, 
	.table-bordered>thead>tr>th{
		border: 1px solid #ddd;
		padding: 5px 10px;
		
	}
	.table-bordered > thead > tr > th, 
	.table-bordered > tbody > tr > th, 
	.table-bordered > tfoot > tr > th, 
	.table-bordered > thead > tr > td, 
	.table-bordered > tbody > tr > td, 
	.table-bordered > tfoot > tr > td{
	    border: 1px solid #95bce2;
	}
	table th {
	   background-color: #c5ddf1;
	   
	   
	}
	table td{
		padding-top: 5px;
	}
</style>
